<template>
  <article class="ar-content">
    <div class="crumbs">
      <!-- <el-breadcrumb separator="/">
        <el-breadcrumb-item class="list-title">
          <div></div>
          <i class="el-icon-menu"></i>项目
        </el-breadcrumb-item>
        <el-breadcrumb-item class="list-title">列表</el-breadcrumb-item>
      </el-breadcrumb>-->
      <div style="line-height:40px">
        <div
          style="height:40px;width:40px;border-radius:100%;background:#BAD4EF;color:#fff;line-height:40px;text-align:center;display:inline-block"
        >
          <i class="el-icon-tickets"></i>
        </div>
        <span style="font-size:18px;font-weight:bold;color:#444;">&nbsp;项目列表</span>
      </div>
    </div>
    <div class="handle-box">
      <el-button icon="el-icon-plus" @click="openDialog(true)" size="small">添加项目</el-button>
      <el-button @click="openMessage" size="small" icon="el-icon-upload2">导入</el-button>
      <el-upload
        ref="uploadfile"
        :multiple="false"
        :action="url"
        :auto-upload="false"
        :on-change="uploadChange"
        :show-file-list="false"
        class="importFile"
      ></el-upload>
      <!--<el-select placeholder="项目类型" class="handle-select mr10" v-model="selectType">
                <el-option :label="item.name" :value="item.value" v-for="(item, index) in projectType" :key="item.value"></el-option>
            </el-select>
            <el-select placeholder="项目进度" class="handle-select mr10" v-model="selectProgress">
                <el-option :label="item.name" :value="item.value" v-for="(item, index) in projectProgress" :key="item.value"></el-option>
            </el-select>
            <el-input placeholder="项目名称关键词" class="handle-input mr10" v-model="selectName"></el-input>
            <el-button type="primary" icon="search" @click="search">搜索</el-button>
            <el-button type="primary"  @click="showYearDialog">导出</el-button>
            <el-upload ref="uploadfile"   :multiple="false" :action="url" :auto-upload="false" :on-change="uploadChange" :show-file-list="false" class="importFile">
                <el-button type="primary" >导入</el-button>
      </el-upload>-->
    </div>
    <div class="card-list">
      <el-table
        :data="tabelData"
        :style="tableStyle"
        ref="projectTabel"
        :row-style="rowClass"
        row-key="pkid"
        :border="true"
      >
        <el-table-column type="index" label="序号" width="50"></el-table-column>
        <el-table-column prop="name" label="名称" width="250"></el-table-column>
        <el-table-column prop="currentStage" label="投资类型" width="160"></el-table-column>
        <el-table-column prop="realInvestment" label="项目实际总投资(万元)" width="160"></el-table-column>
        <el-table-column prop="projInvestment" label="项目完成总投资(万元)" width="160"></el-table-column>
        <el-table-column prop="consContent" label="项目内容"></el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <i
              class="el-icon-edit caozuo"
              title="编辑"
              @click="handEdit(scope.row.pkid)"
              style="margin-right:8px;width: 50px;height:30px;line-height:30px"
            >编辑</i>
            <!--<el-button type="primary" icon="el-icon-document" title="详情" @click="handDetail(scope.row.pkid)">详情</el-button>-->
            <i
              class="el-icon-delete caozuo"
              title="删除"
              @click="handDelete(scope.row.pkid)"
              style="width: 50px;height:30px;line-height:30px"
            >删除</i>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="pagination-div">
      <el-pagination
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        :page-size="params.pagesize"
        :page-sizes="[10,100,1000,10000]"
        layout="total, sizes,prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      width="1000px"
      top="100px"
    >
      <add-project
        :pkid="pkid"
        :projDepartmentID="projDepartmentID"
        :projDepartment="projDepartment"
        :projCreatePersonID="projCreatePersonID"
        :projCreatePerson="projCreatePerson"
        :isAdmin="isAdmin"
        v-on:listenClose="listenClose"
      ></add-project>
    </el-dialog>
    <el-dialog :visible.sync="upload" width="400px" top="100px">
      <div>请选择需要的操作</div>
      <div style="margin-left: 150px;margin-top: 20px;">
        <el-button type="primary" @click="downTemplate">下载模板</el-button>
        <el-upload
          ref="uploadfile"
          :multiple="false"
          :action="url"
          :auto-upload="false"
          :on-change="uploadChange"
          :show-file-list="false"
          class="importFile"
        >
          <el-button type="primary">直接导入</el-button>
        </el-upload>
      </div>
    </el-dialog>
  </article>
</template>

<script>
import bus from "../../assets/bus.js";
import addProject from "./AddProject.vue";
import {
  loginUrl,
  projectProgress,
  manageModule
} from "../tool/Global/app-config.js";
import {
  logoutToLogin,
  queryProjectdetail,
  deleteProjectdetail,
  exportProjects,
  uploadExcelData
} from "../tool/Global/app-mgr.js";
//修改为监测经协系统是否已经登陆
import { apiGetUserInfo } from "../tool/Global/app-login-module.js";
export default {
  created() {
    let height = document.body.clientHeight - 300;
    this.tableStyle = {
      height: height + "px",
      overflow: "auto",
      width: "100%"
    };
  },
  components: {
    addProject
  },
  data: function() {
    return {
      tabelData: [],
      rowClass: function(row, index) {
        return { cursor: "pointer" };
      },
      total: 0,
      params: {
        pagesize: 10,
        pageindex: 1
      },
      dialogVisible: false,
      title: "增加",
      pkid: "",
      projDepartmentID: "",
      projDepartment: "",
      projCreatePersonID: "",
      projCreatePerson: "",
      userInfo: {},
      isAdmin: false,
      url: "",
      upload: false,
      tableStyle: {}
    };
  },
  mounted: function() {
    this.busEvent();
    this.$nextTick(function() {
      let ref = this;
      this.getUser(function() {
        ref.getProjectsBy(function(result) {
          if (result.success) {
            ref.tabelData = result.data.datalist;
            ref.tabelData.forEach(function(item) {
              if (item.currentStage) {
                item.currentStage = projectProgress[item.currentStage - 1].name;
              }
            });
            ref.total = result.data.total;
          }
        });
      });
    });
  },
  methods: {
    openMessage() {
      this.upload = true;
    },
    downTemplate() {
      window.open(manageModule.downLoadTemplate);
      this.upload = false;
    },
    uploadChange(file, fileList) {
      var uploadFormData = new FormData();
      let ref = this;
      uploadFormData.append("projDepartmentID", this.projDepartmentID);
      uploadFormData.append("projDepartment", this.projDepartment);
      uploadFormData.append("projCreatePersonID", this.projCreatePersonID);
      uploadFormData.append("projCreatePerson", this.projCreatePerson);
      uploadFormData.append("file", file.raw);
      uploadExcelData(uploadFormData).then(function(result) {
        if (result.data.success) {
          ref.$message({ message: "导入成功", type: "success" });
          ref.upload = false;
          ref.getProjectsBy(function(result2) {
            if (result2.success) {
              ref.tabelData = result2.data.datalist;
              ref.tabelData.forEach(function(item) {
                if (item.currentStage) {
                  item.currentStage =
                    projectProgress[item.currentStage - 1].name;
                }
              });
              ref.total = result2.data.total;
            }
          });
        } else {
          ref.$message.error(result.data.message);
        }
      });
      //params.file = file.raw;
      //uploadExcelData(params);
    },
    busEvent() {
      let self = this;
      bus.$on("search", function(params) {
        for (var key in params) {
          self.params[key] = params[key];
        }
        self.params.pageindex = 1;
        self.getProjectsBy(function(result) {
          if (result.success) {
            self.tabelData = result.data.datalist;
            self.tabelData.forEach(function(item) {
              if (item.currentStage) {
                item.currentStage = projectProgress[item.currentStage - 1].name;
              }
            });
            self.total = result.data.total;
          }
        });
      });
    },
    openDialog(type, pkid) {
      this.title = type ? "增加项目" : "编辑项目";
      this.dialogVisible = true;
      this.pkid = pkid ? pkid : "";
    },
    handleCurrentChange(val) {
      this.params.pageindex = val;
      let ref = this;
      this.getProjectsBy(function(result) {
        if (result.success) {
          ref.tabelData = result.data.datalist;
          ref.tabelData.forEach(function(item) {
            if (item.currentStage) {
              item.currentStage = projectProgress[item.currentStage - 1].name;
            }
          });
          ref.total = result.data.total;
        }
      });
    },
    handleSizeChange(val) {
      this.params.pagesize = val;
      let ref = this;
      ref.getProjectsBy(function(result) {
        if (result.success) {
          ref.tabelData = result.data.datalist;
          ref.tabelData.forEach(function(item) {
            if (item.currentStage) {
              item.currentStage = projectProgress[item.currentStage - 1].name;
            }
          });
          ref.total = result.data.total;
        }
      });
    },
    handEdit(pkid) {
      this.openDialog(false, pkid);
      event.stopPropagation();
    },
    handDelete(pkid) {
      let ref = this;
      this.$confirm("确认删除？")
        .then(_ => {
          deleteProjectdetail(pkid).then(function(result) {
            if (result.data.success) {
              ref.getProjectsBy(function(result) {
                if (result.success) {
                  ref.tabelData = result.data.datalist;
                  ref.tabelData.forEach(function(item) {
                    if (item.currentStage) {
                      item.currentStage =
                        projectProgress[item.currentStage - 1].name;
                    }
                  });
                  ref.total = result.data.total;
                }
              });
            }
          });
        })
        .catch(_ => {});
      event.stopPropagation();
    },
    getProjectsBy(callback) {
      if (!this.isAdmin) {
        this.params.projExaminationOrg = this.projDepartment;
      }
      queryProjectdetail(this.params).then(function(result) {
        callback(result.data);
      });
    },
    listenClose() {
      this.dialogVisible = false;
      let ref = this;
      this.getProjectsBy(function(result) {
        if (result.success) {
          ref.tabelData = result.data.datalist;
          ref.tabelData.forEach(function(item) {
            if (item.currentStage) {
              item.currentStage = projectProgress[item.currentStage - 1].name;
            }
          });
          ref.total = result.data.total;
        }
      });
    },
    getUser(callback) {
      let self = this;
      apiGetUserInfo()
        .then(res => {
          let userInfo = res.data.user;
          if (userInfo.status) {
            var bol = false;
            YanAnAPP.managerId.every(function(item) {
              if (userInfo.sys_role == item) {
                bol = true;
                return false;
              }
            });

            if (bol) {
              self.projDepartmentID = userInfo.sys_role;
              self.projDepartment = userInfo.sys_role;
              self.projCreatePersonID = userInfo.userid;
              self.projCreatePerson = userInfo.userCaption;
              self.userInfo = userInfo;
              // for(let i = 0; i < YanAnAPP.adminId.length;i++){
              //     if(YanAnAPP.adminId==self.projDepartmentID){
              //         self.isAdmin = true;
              //     }
              // }
              if (YanAnAPP.adminId == self.projDepartmentID) {
                self.isAdmin = true;
              } else {
                self.isAdmin = false;
              }
              if (typeof callback == "function") {
                callback();
              }
            } else {
              self.$message.error("不是管理用户，请重新登录");
              logoutToLogin().then(function() {
                window.location.href =
                  GeoAPP.Sites.Cas + "/logout?service=" + loginUrl;
              });
            }
          } else {
            self.$message.error("请先登录");
            window.location.href = loginUrl;
          }
        })
        .catch(e => {
          self.$message.error("请先登录");
          window.location.href = loginUrl;
        });
    }
  }
};
</script>

<style scoped>
.crumbs {
  margin-bottom: 10px;
}
.list-title,
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  color: #409eff !important;
}
.ar-content {
  word-wrap: break-word;
  background-color: #f5f5f5;
  border-radius: 5px;
  box-sizing: border-box;
  padding: 10px;
  width: 100%;
  margin: 0 auto;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
  margin-right: 10px;
}

.del-button {
  color: #fa5555;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.card-div {
  width: 340px;
  float: left;
  margin-left: 20px;
  margin-bottom: 20px;
}

.card-list {
  overflow-y: auto;
  position: relative;
  margin-bottom: 10px;
}

.handle-box {
  /* margin-bottom: 20px;
  margin-left: 20px; */
  height: 40px;
  /* background: #fff; */
  padding-top: 10px;
  padding-left: 10px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.pagination-div {
  text-align: right;
}
.importFile {
  display: inline-block;
  margin-left: 9px;
}
.caozuo:hover {
  color: #fff;
  background-color: #409eff;
}
*::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 8px;
}
*::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 5px;
  -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #eee;
}
*::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  /*-webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.1);*/
  border-radius: 2px;
  background: #f5f5f5;
}
</style>
<style>
.thColor {
  color: #409eff;
}
.el-breadcrumb__inner,
.el-breadcrumb__inner a {
  color: #409eff !important;
}
.el-table thead {
  color: #555;
}
</style>
